<template>
    <div class="son16">
        <h3>SonDemo16</h3>
        <header v-if="$slots.header">
            <slot name="header" :title="tle"> header </slot>
        </header>
        <main>
            <slot :msg> main </slot>
        </main>
        <footer>
            <slot name="footer"> footer </slot>
        </footer>
    </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';

const msg = ref('子组件son16的msg')
const tle = ref('子组件son16的标题')

</script>

<style lang="scss" scoped>
.son16 {
    border: 3px solid dodgerblue;
    padding: 10px;
    margin: 10px;
}
</style>